class Slider {
  constructor(id) {
    this.sliderBox = document.getElementById(id);
    this.sliderUl = this.sliderBox.children[0];
    this.sliderLists = this.sliderUl.children;
    this.len = this.sliderLists.length;
    this.i = 0;
    this.idx = 0;
    this.timer = null;

    this.autoPlay();
    this.clearAndSet();
  }
  move() {
    this.i++;

    if (this.i == this.len) {
      this.i = 0;
    }
    if (this.i == -1) {
      this.i = this.len - 1;
    }
    if (this.cirLists) {
      this.cirLists[this.idx].className = "";
      this.cirLists[this.i].className = "hover";
    }
    this.sliderLists[this.idx].style.display = "none";
    this.sliderLists[this.i].style.display = "block";
    this.idx = this.i;
  }
  autoPlay() {
    this.timer = setInterval(() => {
      this.move();
    }, 3000);
  }
  addBtn() {
    this.arrs = document.createElement("div");
    this.arrs.className = "arr";
    this.sliderBox.appendChild(this.arrs);
    this.arrs.innerHTML = ` <span>&lt;</span>
    <span>&gt;</span>`;

    this.lArr = this.arrs.children[0];
    this.rArr = this.arrs.children[1];
    this.lArr.onclick = () => {
      this.i -= 2;
      this.move();
    };
    this.rArr.onclick = () => {
      this.move();
    };
  }
  addCircle() {
    this.circles = document.createElement("ul");
    this.circles.className = "circle";
    this.sliderBox.appendChild(this.circles);
    let html = "";
    for (let i = 0; i < this.len; i++) {
      html += `<li>${i + 1}</li>`;
    }
    this.circles.innerHTML = html;
    this.cirLists = this.circles.querySelectorAll("li");
    this.cirLists[0].className = "hover";
    this.cirLists.forEach((e, i) => {
      e.onmouseover = () => {
        this.i = i - 1;
        this.move();
      };
    });
  }

  clearAndSet() {
    this.sliderBox.onmouseover = () => {
      clearInterval(this.timer);
    };
    this.sliderBox.onmouseout = () => {
      this.timer = setInterval(() => {
        this.move();
      }, 3000);
    };
  }
}
